<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <div class="create" @click="onemLevel">添加一级</div>
          <div class="create" @click="twomLevel">添加二级</div>
        </div>
      </el-col>
    </el-row>
    <div class="main">
      <div class="orgbtn fl margin-top-30">
        <label class="create bgblue">处理措施</label>
        <em></em>
      </div>
      <div class="listItem">
        <ul>
          <li :class="index==mlevel1?'activeli':''" v-for="(item,index) in measures" :key="index"
              class="itemli">
            <hr></hr>
            <div class="itemson" @click='actived(index, "mlevel1")'>
              <em :class="index==mlevel1||!item.subset?'el-icon-minus':'el-icon-plus'"
                  style="cursor: pointer;"></em>
              <span :class="index==mlevel1?'active':''" style="cursor: pointer;">{{item.punishNname}}</span>
            </div>
            <i class="el-icon-edit edit-icon" @click="editmbtn(item, 1)"
               style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
            <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delmbtn(item)"
               style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
            <hr v-if="index==mlevel1&&item.subset" style="width:170px"></hr>
            <div class="items" ref="ele">
              <ul v-if='index==mlevel1'>
                <li v-for="(item1,index1) in item.subset" :key="index1"
                    :class='item.subset.length>2?"margin50":"margin25"' class="itemlison">
                  <hr class="fl width-30"></hr>
                  <div class="itemson">
                    <em class="el-icon-minus"></em>
                    <span id="ul1" class="active">{{item1.punishNname}}</span>
                  </div>
                  <i class="el-icon-edit edit-icon" @click="editmbtn(item1, 2)"
                     style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                  <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delmbtn(item1)"
                     style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 处罚措施 -->
    <el-dialog title="" :visible.sync="levelmdialog" width="400px" append-to-body @close="toClose">
            <span>
                <h2 class="titleblue">添加二级处罚措施</h2>
                <div class="contant type-div">
                    <el-form ref="form" :model="lvmform" label-width="100px">
                        <el-form-item label="一级处罚措施">
                            <el-select v-model="lvmform.level1" placeholder="请选择" class="select-width-220">
                                <el-option v-for="item in measures" :key="item.id" :label="item.punishNname"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级处罚措施">
                            <el-input v-model="lvmform.level2" class="select-width-220"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </span>
      <el-row :gutter="24" class="footerbtn">
        <el-button class="sure" @click="lvmbtn">添加</el-button>
        <el-button class="cancel" @click="toClose">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import punitiveMeasuresService from '@/services/PunitiveMeasuresService.js'

  export default {
    props: ['measures'],
    name: 'TreatmentMeasures',
    data () {
      return {
        measureSos: [],
        mcroptions: [],
        levelmdialog: false,
        level1: -1,
        level2: -1,
        dlevel1: -1,
        dlevel2: -1,
        mlevel1: -1,
        mlevel2: -1,
        lvmform: {
          level1: '',
          name: '',
        },
        cuid: 1
      }
    },
    methods: {
      onemLevel () {
        this.$prompt('请输入一级处罚措施', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: '一级处罚措施不能为空',
          customClass: 'customClass',

        }).then(({value}) => {
          let obj = {
            level: 1,
            orderx: null,
            pid: null,
            punishNname: value,
          }
          punitiveMeasuresService.create(obj).then(res => {
            this.$message({
              type: 'success',
              message: '创建成功！'
            })
            this.$emit('update', 0)
          })
        }).catch(() => {
          this.$message('您已取消此次添加')
        })
      },
      toClose () {
        this.levelmdialog = false
        this.lvmform = {}
      },
      twomLevel () {
        this.levelmdialog = true
        // this.getcrmData()
      },
      actived (index, key) {
          if (this[key] == index) {
              this[key] = -1
              return false
          }
          this[key] = index
          // this.fheight= this.$refs.ele[index].clientHeight+'px'
      },
      asdasd2 (index) {
        this.mlevel1 = index
      },
      editmbtn (item, num) {
        let str = '', error = ''
        switch (num) {
          case 1:
            str = '请输入一级处罚措施'
            error = '一级处罚措施不能为空'
            break
          case 2:
            str = '请输入二级处罚措施'
            error = '二级处罚措施不能为空'
            break
        }
        this.$prompt(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: error,
          inputValue: item.punishNname,
          customClass: 'customClass',
        }).then(({value}) => {
          let obj = {
            level: item.level,
            orderx: item.orderx,
            pid: item.pid,
            punishNname: value,
            id: item.id,
            createTime: item.createTime
          }
          punitiveMeasuresService.update(obj).then(res => {
            this.levelmdialog = false
            this.$alert('编辑成功')
            this.$emit('update')
          })
        }).catch(() => {
          this.$message('您已取消此次编辑')
        })
      },
      delmbtn (item) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            punitiveMeasuresService.delete(item.id).then(res => {
              this.levelmdialog = false
              this.$alert('删除成功')
              this.$emit('update')
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      lvmbtn(){
        if(!this.lvmform.level1){
          this.$alert('请选择一级处罚措施');
          return false;
        }
        if(!this.lvmform.level2){
          this.$alert('请输入二级处罚措施');
          return false;
        }
        let obj = {
          level: 2,
          orderx: null,
          pid: this.lvmform.level1,
          punishNname: this.lvmform.level2,
        }
        punitiveMeasuresService.create(obj).then(res => {
          this.$message({
            type: 'success',
            message: '创建成功！'
          })
          this.$emit('update', 0)
          this.levelmdialog = false
        })
      },
    }
  }
</script>

<style scoped lang="scss" src="../Dcustom.scss"></style>
